<template>
	<view class="download-box">
		<view style="height: 50vh;"></view>
		<view class="info-box">
			<image src="@/static/logo.png" alt="" mode="widthFix" />
			<text class="name">乐 享 商 城</text>
			<view class="btn-box" @click="toDownload('1')">
				<image src="@/static/Android.png" alt="" mode="heightFix" />
				<text class="btn-title">Android下载</text>
			</view>
			<view class="btn-box" @click="toDownload('2')">
				<image src="@/static/Ios.png" alt="" mode="heightFix" />
				<text class="btn-title">iPhone下载</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as downloadApi from '@/api/download.js';
	export default {
		methods: {
			toDownload(type) {
				downloadApi.download({
						app_id: type
					})
					.then(res => {
						window.open(res.data.apk_url);
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.download-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		background: url('@/static/download-bg.png') no-repeat;
		background-size: cover;
		padding: 0 25%;
	}

	.info-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		>image{
			width: 200rpx;
		}
	}

	.name {
		font-size: 20px;
		color: #fff;
		margin: 0 0 20px 0;
	}

	.btn-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #fff;
		border-radius: 30px;
		padding: 10px 16px;
		margin-bottom: 16px;
		image{
			height: 40rpx;
		}
	}

	.btn-title {
		margin-left: 10px;
	}
</style>
